<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import * as systemSettingApi from '@/api/systemSetting'
import { message } from 'ant-design-vue'
import { copyToCliboard } from '@/hooks/util.ts'
import MsgTable from './MsgTable.vue'
import Emoji from './Emoji.vue'
import OutCinemaLine from './OutCinemaLine.vue'

// 出票方式
let quotationMode = ref<number>(1)
const msgTableRef = ref()
const emojiRef = ref()
const textareaRef = ref()
const textareaRef2 = ref()
const OutCinemaLineRef = ref()

// 自动识别报价
const autoPrice = ref<boolean>()
const autoChangePrice = async () => {
  console.log('autoPrice=', autoPrice.value)
}

// 自动回复
const autoReply = ref<boolean>()
const autoChangeReply = async () => {
  console.log('autoReply=', autoReply.value)
}

// 放映时间
let showTime = ref<number>(0)
let showTimeDesc = ref<string>('')

// 观影提醒功能
let showTx = ref<number>(0)
let showTxDesc = ref<string>('')

// 自动同意好友申请
const agreeApply = ref<boolean>()
const autoChangeAgreeApply = async () => {
  console.log('agreeApply=', agreeApply.value)
}

// 同意好友申请数量
let firendNum = ref<number>(0)

// 自动同意好友间隔时间
let endTime = ref<number>(0)
let startTime = ref<number>(0)

// 添加打招呼信息
const addMsg = () => {
  msgTableRef.value.showModal(tableList.value)
}

// 收款模式
let payType = ref<number>(1)

// 出票方式
let ticketType = ref<number>(1)

// 添加好友招呼消息
const tableList = ref<Array<any>>([])
const setTableList = (args: any) => {
  tableList.value = args
  tableList.value = tableList.value.map(item => {
    return {
      robotId: okRobat.value,
      content: item.content,
      keyword: item.keyword,
      type: item.type,
    }
  })
  console.log('tableList=', tableList.value)
}

// 选择表情
const selectEmoji = () => {
  emojiRef.value.showModal()
}

// 获取文本域的光标位置
const getCursorPosition = (inputElement: HTMLInputElement) => {
  if (!inputElement) return 0
  const selectionStart = inputElement.selectionStart
  const selectionEnd = inputElement.selectionEnd
  if (selectionStart === selectionEnd) return selectionStart
  return selectionStart
}
let cursorPosition = ref<number>(0)
let target = ref<string>('')
const getPosition = (textarea: any) => {
  // console.log('textarea=', textarea)

  if (textarea == 'textareaRef') {
    target.value = 'textareaRef'
    const textareaElement = textareaRef.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else if (textarea == 'textareaRef2') {
    target.value = 'textareaRef2'
    const textareaElement = textareaRef2.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else {
    console.log('textareaRef未定义或不是DOM元素')
  }
}

// 已经选好表情
const setOkEmoji = (args: string) => {
  if (target.value == 'textareaRef') {
    // 从原始字符串的position位置开始截取到末尾的子串
    let substringAfterPosition = showTimeDesc.value.slice(cursorPosition.value)
    // 拼接新字符串和截取后的子串
    let result = showTimeDesc.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    showTimeDesc.value = result
  } else if (target.value == 'textareaRef2') {
    let substringAfterPosition = showTxDesc.value.slice(cursorPosition.value)
    let result = showTxDesc.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    showTxDesc.value = result
  }
}

// 放映时间限制话术的变量
const showTimeDescTagList = ref(['粉丝昵称', '放映时间', '限制间隔'])

// 观影提醒话术的变量
const showTxDescTagList = ref(['粉丝昵称', '影院名', '影片名', '放映时间'])

// 复制文本
const copyTag = (text: string) => {
  copyToCliboard(`[${text}]`)
  message.success('复制成功~')
}

// 余额查询
let balanceKeyWord = ref<string>('')
let balanceDesc = ref<string>('')

// 兜底报价开关
let bottomPriceSwitch = ref<boolean>(true)
const togBottomPrice = (e: any) => {
  bottomPriceSwitch.value = e
  console.log('bottomPriceSwitch=', bottomPriceSwitch.value)
}

onMounted(() => {
  getRobatList()
  getGroupList()
})

// 拉取机器人列表
const emit = defineEmits<{
  EmitRobatList: []
}>()
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()

const options = ref<SelectProps['options']>([])
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getWechatRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: unknown) => {
  groupId.value = selectValue as string
  sendRobat.value = options.value
    .filter(item => item.groupId == groupId.value)
    .map(element => element.id)
}
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getRobatList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await accountApi.getList({
      currentPage: 1,
      pageSize: 100,
    })
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      options.value = data.list

      if (data.list.length == 0) {
        emit('EmitRobatList', data.list.length)
        // message.error('微信：无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectRobat = (selectValue: any) => {
  okRobat.value = selectValue as string

  getWechatConfig(okRobat.value)
}

// 选择微信账号/选择闲鱼账号
const getWechatConfig = async (robotId: string) => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await systemSettingApi.getWechatConfig({
      robotId,
    })
    if (state === 200) {
      // console.log('data=', data)
      balanceKeyWord.value = data.balanceKey
      balanceDesc.value = data.balanceRemindersScript
      bottomPriceSwitch.value = data.bottomPriceSwitch == 1 ? true : false
      ticketType.value = data.outTicketState
      autoPrice.value = data.quoteState == 1 ? true : false // 报价开关
      autoReply.value = data.replyState == 1 ? true : false // 回复开关
      showTime.value = data.showTimeLimit // 放映时间限制
      showTimeDesc.value = data.showTimeLimitScript // 放映时间限制话术
      showTxDesc.value = data.movieRemindersScript
      showTx.value = data.movieRemindersTime
      agreeApply.value = data.friendApplyState == 1 ? true : false
      firendNum.value = data.friendApplyCount
      startTime.value = data.beginFriendApplyTime
      endTime.value = data.endFriendApplyTime
      payType.value = data.payType
      tableList.value = data.greetScripts.map((item: any) => {
        return {
          identifying: item.id,
          content: item.content,
          keyword: item.keyword,
          robotId: item.robotId,
          type: item.type,
        }
      })
      okOutLineList.value = data.lineList.map((item: any) => {
        return {
          label: item.name,
          value: item.code,
        }
      })

      outLine.value = data.lineList.map((item: any) => item.code)

      bxChannel.value = data.alternativeProvisionChannel // 备选供应渠道
      channel.value = data.provisionChannel // 首选供应渠道
      alternativeChannel.value = data.alternativeChannel // 备选供应渠道 - 新
      isFixedPrice.value = data.enableLimitPrice // 是否启用限价 - 新
      quotationSort.value = data.quotationSort // 优先执行报价规则
      quotationMode.value = data.quotationMode // 报价模式

      if (channel.value == 3 || channel.value == 7 || channel.value == 8) {
        fixedPriceFlag.value = true
      } else {
        fixedPriceFlag.value = false
      }

      if (
        alternativeChannel.value == 3 ||
        alternativeChannel.value == 7 ||
        alternativeChannel.value == 8
      ) {
        fixedPriceFlag_2.value = true
      } else {
        fixedPriceFlag_2.value = false
      }

      alternativeChannelList.value?.forEach(item => {
        item.able = false
        if (item.value == channel.value) {
          item.able = true
        }
        // if (item.value == 7) {
        //   item.able = true
        // }
      })
      channelList.value?.forEach(item => {
        item.able = false
        if (item.value == alternativeChannel.value) {
          item.able = true
        }
        // if (item.value == 7) {
        //   item.able = true
        // }
      })
      // console.log('alternativeChannelList=', alternativeChannelList.value)
      // console.log('channelList=', channelList.value)
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 推送配置
let sendRobat = ref<Array<string>>([])
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
  // console.log('sendRobat.value=', sendRobat.value)
}
const pushRobot = async () => {
  if (sendRobat.value?.length == 0) {
    message.error('请选择要推送的账号！')
    return
  }

  let params = {
    robotIds: sendRobat.value,
    wechatConfigDTO: {
      friendApplyCount: firendNum.value,
      friendApplyState: agreeApply.value ? 1 : 0,
      beginFriendApplyTime: startTime.value,
      endFriendApplyTime: endTime.value,
      greetScripts: tableList.value, // 打招呼话术
      movieRemindersScript: showTxDesc.value, // 观影提醒时间话术
      movieRemindersTime: showTx.value, // 观影提醒时间
      payType: payType.value, // 收款模式
      quoteState: autoPrice.value ? 1 : 0, // 报价开关
      replyState: autoReply.value ? 1 : 0, // 回复开关
      showTimeLimit: showTime.value, // 放映时间限制
      showTimeLimitScript: showTimeDesc.value, // 放映时间限制话术
      outTicketState: ticketType.value, // 出票方式
      bottomPriceSwitch: bottomPriceSwitch.value ? '1' : '0',
      balanceKey: balanceKeyWord.value,
      balanceRemindersScript: balanceDesc.value,
      excludeCinemaLines: outLine.value,
      alternativeProvisionChannel: bxChannel.value, // 备选供应渠道
      provisionChannel: channel.value, // 首选供应渠道
      alternativeChannel: alternativeChannel.value, // 备选供应渠道 - 新
      enableLimitPrice: isFixedPrice.value, // 是否启用限价 - 新
      quotationSort: quotationSort.value, // 优先执行报价规则
      quotationMode: quotationMode.value, //询价模式
    },
  }

  console.log('params=', params)

  try {
    let { state, message: msg } = await systemSettingApi.wechatConfigPushRobots(params)
    if (state === 200) {
      message.success('推送成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

let okOutLineList = ref<Array<any>>([])
const outCinemaLine = () => {
  OutCinemaLineRef.value.showModal()
}

let outLine = ref<Array<any>>([])
const getOutCinemaLine = (list: Array<any>) => {
  console.log('排除院线list=', list)
  outLine.value = list.map(item => item.value)
}

// 首选渠道
let channel = ref<number | string>(6)
const channelList = ref<SelectProps['options']>([
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
let fixedPriceFlag = ref<boolean>(false)
let isFixedPrice = ref<number>(1)
const selectChannel = (e: any) => {
  console.log('首选渠道=', e)
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag.value = true
  } else {
    fixedPriceFlag.value = false
  }
  alternativeChannelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // channelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}

// 备选渠道 - 新
let alternativeChannel = ref<number | string>(3)
let fixedPriceFlag_2 = ref<boolean>(false)
const alternativeChannelList = ref<SelectProps['options']>([
  {
    label: '不使用',
    value: 0,
    able: false,
  },
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
const selectAlternativeChannel = (e: any) => {
  console.log('备选渠道=', e)
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag_2.value = true
  } else {
    fixedPriceFlag_2.value = false
  }
  channelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // alternativeChannelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}
// 备选渠道 - 新

// 备选渠道
let bxChannel = ref<number>(0)

// 优先执行报价规则
let quotationSort = ref<number>(1)
</script>

<template>
  <div>
    <div style="margin: 5px 0; text-align: right">
      <span>选择微信账号：</span>
      <a-select
        v-model:value="okRobat"
        @change="selectRobat"
        placeholder="请选择"
        style="width: 150px; text-align: left"
        show-search
        :options="optionList"
        :filter-option="filterOption"
      >
        <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div>

    <div class="rowBox">
      <span class="label-1">自动识别报价：</span>
      <span class="label-2">
        <a-switch v-model:checked="autoPrice" @change="autoChangePrice" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后识别成功不再进行报价，识别失败会正常发送失败文案
    </div>

    <div class="rowBox">
      <span class="label-1">兜底报价开关：</span>
      <span class="label-2">
        <a-switch v-model:checked="bottomPriceSwitch" @change="togBottomPrice" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      当没有命中任何报价规则时按原价93折进行报价
    </div>

    <div class="rowBox">
      <span class="label-1">智能问答回复开关：</span>
      <span class="label-2">
        <a-switch v-model:checked="autoReply" @change="autoChangeReply" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后智能问答不再被触发
    </div>

    <div class="rowBox">
      <span class="label-1">放映时间限制：</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="showTime"></a-input-number>
      <span style="margin: 5px">分钟</span>

      <span style="line-height: 30px; margin-left: 20px">排除院线列表：</span>
      <a-button size="small" type="primary" @click="outCinemaLine">设置</a-button>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">判断场次时间距离现在时间的间隔，小于设置后触发制定话术</span>
    </div>

    <div class="rowBox">
      <span class="label-1">放映时间限制话术：</span>
      <a-textarea
        ref="textareaRef"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        v-model:value="showTimeDesc"
        @click="getPosition('textareaRef')"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTimeDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">观影提醒时间：</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="showTx"></a-input-number>
      <span style="margin: 5px">分钟</span>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">可支持放映前x分钟，触发文案xxx，为空不发送</span>
    </div>

    <div class="rowBox">
      <span class="label-1">观影提醒话术：</span>
      <a-textarea
        ref="textareaRef2"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        @click="getPosition('textareaRef2')"
        v-model:value="showTxDesc"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTxDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">触发余额查询关键字：</span>
      <a-input v-model:value="balanceKeyWord" style="width: 500px" />
    </div>

    <div class="rowBox">
      <span class="label-1">余额查询话术：</span>
      <a-textarea
        ref="textareaRef2"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 160px"
        v-model:value="balanceDesc"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div style="width: 500px">
        <a-tag
          @click="copyTag('粉丝昵称')"
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
        >
          粉丝昵称
        </a-tag>
        <a-tag
          @click="copyTag('余额')"
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
        >
          余额
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">自动同意好友申请：</span>
      <span class="label-2">
        <a-switch v-model:checked="agreeApply" @change="autoChangeAgreeApply" />
      </span>
    </div>

    <div class="rowBox">
      <span class="label-1">同意好友申请数量：</span>
      <a-input style="width: 120px" type="number" v-model:value="firendNum"></a-input>
      <span style="margin: 5px">个/天</span>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">控制每天自动通过的好友数量</span>
    </div>

    <div class="rowBox">
      <span class="label-3">自动同意好友间隔时间：</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="startTime"></a-input-number>
      <span style="margin: 5px">秒</span>
      <span style="margin: 5px">—</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="endTime"></a-input-number>
      <span style="margin: 5px">秒</span>
    </div>

    <div class="rowBox">
      <span class="label-3">添加好友招呼消息设置：</span>
      <a-button type="primary" style="border-radius: 6px" size="small" @click="addMsg">
        设置
      </a-button>
    </div>

    <div class="rowBox">
      <span class="label-3">收款模式设置：</span>
      <a-radio-group v-model:value="payType">
        <a-radio :value="1">微信转账 + 二维码收款</a-radio>
        <a-radio :value="2">微信支付</a-radio>
      </a-radio-group>
    </div>

    <div class="rowBox">
      <span class="label-3">出票方式：</span>
      <a-radio-group v-model:value="ticketType">
        <a-radio :value="1">手动</a-radio>
        <a-radio :value="2">自动</a-radio>
      </a-radio-group>
      <a-popover color="black">
        <template #content>
          <div style="color: #fff">
            <div>手动出票：粉丝支付完成后，将通知运营者进行手动出票</div>
            <div>自动出票：粉丝支付完成后，订单推送到平台，完成出票，请确保余额充足</div>
          </div>
        </template>
        <QuestionCircleOutlined style="color: red; font-size: 18px; line-height: inherit" />
      </a-popover>
    </div>

    <div class="rowBox">
      <span class="label-3">报价出票模式：</span>
      <a-radio-group v-model:value="quotationMode">
        <a-radio :value="1">预估限价</a-radio>
        <a-radio :value="2" :disabled="true">一口价</a-radio>
      </a-radio-group>
      <a-popover color="black">
        <template #content>
          <div style="color: #fff">
            <div>预估限价：基于历史成交数据、市场供需关系、场次信息，给出预估价格，可在预估基础上设置报价和限价</div>
            <div>一口价：联动多供应平台，一口价成交，成功率高，溢价包赔付</div>
          </div>
        </template>
        <QuestionCircleOutlined style="color: red; font-size: 18px; line-height: inherit" />
      </a-popover>
    </div>

    <!-- <div class="rowBox">
      <span class="label-3">首选供应渠道：</span>
      <a-select
        v-model:value="channel"
        placeholder="请选择"
        @change="selectChannel"
        style="width: 300px"
        allowClear
      >
        <a-select-option
          v-for="(item, index) in channelList"
          :key="index"
          :value="item.value"
          :disabled="item.able"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div> -->
    <!-- <div style="position: relative; left: 160px; top: -8px; width: 450px; border-radius: 20px">
      <span v-if="channel == 3" style="color: #bfbfbf">
        <!~~ 麻花 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-if="channel == 10" style="color: #bfbfbf">
        <!~~ 影划算 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 5" style="color: #bfbfbf">
        <!~~ 芒果 ~~>
        出票成本=预估出票价
      </span>
      <span v-else-if="channel == 7" style="color: #bfbfbf">
        <!~~ 守兔 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 11" style="color: #bfbfbf">
        <!~~ 守兔一口价 ~~>
        你的出票成本=预估出票价
      </span>
      <span v-else-if="channel == 9" style="color: #bfbfbf">
        <!~~ 哈哈快票 ~~>
        你的出票成本=猫淘价（原价）*90%
      </span>
      <span v-else-if="channel == 6" style="color: #bfbfbf">
        <!~~ 哈哈电影票 ~~>
        不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 8" style="color: #bfbfbf">
        <!~~ 星驰 ~~>
        你的出票成本=预估出票价
      </span>
    </div>-->
    <!-- <div class="rowBox">
      <span class="label-3">备选供应渠道：</span>
      <a-radio-group v-model:value="bxChannel">
        <a-radio :value="0">不使用</a-radio>
        <a-radio :value="1">使用</a-radio>
      </a-radio-group>
    </div> -->

    <!-- 备选渠道 - 新 -->
    <!-- <div class="rowBox">
      <span class="label-3">备选供应渠道：</span>
      <a-select
        v-model:value="alternativeChannel"
        placeholder="请选择"
        @change="selectAlternativeChannel"
        style="width: 300px"
        allowClear
      >
        <a-select-option
          v-for="(item, index) in alternativeChannelList"
          :key="index"
          :value="item.value"
          :disabled="item.able"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div> -->
    <!--  <div style="position: relative; left: 160px; top: -8px; width: 450px; border-radius: 20px">
      <span v-if="alternativeChannel == 3" style="color: #bfbfbf">
        <!~~ 麻花 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-if="alternativeChannel == 10" style="color: #bfbfbf">
        <!~~ 影划算 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 5" style="color: #bfbfbf">
        <!~~ 芒果 ~~>
        出票成本=预估出票价
      </span>
      <span v-else-if="alternativeChannel == 7" style="color: #bfbfbf">
        <!~~ 守兔 ~~>
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 11" style="color: #bfbfbf">
        <!~~ 守兔一口价 ~~>
        你的出票成本=预估出票价
      </span>
      <span v-else-if="alternativeChannel == 9" style="color: #bfbfbf">
        <!~~ 哈哈快票 ~~>
        你的出票成本=猫淘价（原价）*90%
      </span>
      <span v-else-if="alternativeChannel == 6" style="color: #bfbfbf">
        <!~~ 哈哈电影票 ~~>
        不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 8" style="color: #bfbfbf">
        <!~~ 星驰 ~~>
        你的出票成本=预估出票价
      </span>
    </div>-->
    <!-- 备选渠道 - 新 -->

    <!-- 新增 - 是否启用限价 -->
    <div class="rowBox" v-if="fixedPriceFlag || fixedPriceFlag_2">
      <span class="label-3">是否限价：</span>
      <a-radio-group v-model:value="isFixedPrice" style="margin-top: 5px">
        <a-radio :value="1">启用限价</a-radio>
        <a-radio :value="0">不启用限价</a-radio>
      </a-radio-group>
      
    </div>

    <!-- 优先执行报价规则 -->
    <div class="rowBox">
      <span class="label-3">优先执行的报价模式：</span>
      <a-radio-group v-model:value="quotationSort" style="margin-top: 5px">
        <a-radio :value="1">渠道询价模式</a-radio>
        <a-radio :value="2">专业报价模式</a-radio>
      </a-radio-group>
    </div>
    <div style="position: relative; left: 160px; top: -8px">
      <div v-if="quotationSort == 1" style="color: #bfbfbf">
        系统报价执行顺序：渠道询价模式->专业报价模式->兜底模式
      </div>
      <div v-if="quotationSort == 2" style="color: #bfbfbf">
        系统报价执行顺序：专业报价模式->渠道询价模式->兜底模式
      </div>
    </div>

    <!-- 推送 -->
    <div style="margin: 5px 0">
      <span>选择推送微信账号：</span>
      <a-select
        v-model:value="groupId"
        @change="selectGroup"
        placeholder="请选择分组"
        style="width: 6%; text-align: left"
      >
        <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
          {{ item.groupName }}
        </a-select-option>
      </a-select>
      <a-select
        mode="multiple"
        v-model:value="sendRobat"
        @change="selectSendRobat"
        placeholder="请选择"
        allowClear
        style="width: 600px; text-align: left; margin-left: 5px"
        show-search
        :options="optionList"
        :filter-option="filterOption"
      >
        <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <a-button type="primary" style="margin-left: 10px; border-radius: 6px" @click="sendOk">
        确认推送
      </a-button>

      <MsgTable ref="msgTableRef" @refresh="setTableList"></MsgTable>
      <Emoji ref="emojiRef" @okEmoji="setOkEmoji"></Emoji>
      <OutCinemaLine
        ref="OutCinemaLineRef"
        @refresh="getOutCinemaLine"
        :okOutLineList="okOutLineList"
      ></OutCinemaLine>
    </div>
  </div>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 1000px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a:hover {
  color: red;
}

.rowBox {
  display: flex;
  margin-bottom: 15px;
  // background: pink;
}

.label-1 {
  width: 140px;
  text-align: center;
  line-height: 30px;
}

.label-3 {
  width: 160px;
  text-align: center;
  line-height: 30px;
}

.iptWidth {
  width: 500px;
}
</style>
